<!-- 用户管理 -->
<template>
<el-header style="text-align: right; font-size: 12px">
  <div class="toolbar">
    <el-button type="primary" @click="dialogTableVisible=true"> 新增用户</el-button>
  </div>
</el-header>
<div class="container">
    <el-table :data="tickList" fit="true" height=590 style="padding: 10px 30px;">
    <el-table-column prop="user" label="用户姓名" width="100">
      <template #default=scope>
        <el-input type="text" v-model="scope.row.user" v-show="scope.row.edit" />
        <span v-show="!scope.row.edit">{{scope.row.user}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="电话" width="120">
      <template #default=scope>
        <el-input type="number" v-model="scope.row.phone" v-show="scope.row.edit" />
        <span v-show="!scope.row.edit">{{scope.row.phone}}</span>
      </template>
    </el-table-column>
    <el-table-column prop="mail" label="邮箱" width="150">
      <template #default=scope>
        <el-input type="text" v-model="scope.row.mail" v-show="scope.row.edit" />
        <span v-show="!scope.row.edit">{{scope.row.mail}}</span>
      </template>
    </el-table-column>
    <el-table-column  prop="address" label="地址"  :show-overflow-tooltip="true" >
      <template #default=scope>
        <el-input type="text" v-model="scope.row.address" v-show="scope.row.edit" />
        <span v-show="!scope.row.edit">{{scope.row.address}}</span>
      </template>
    </el-table-column>
    <el-table-column  label="功能"  fixed="right" width="250">
      <template #default="scope">
        <el-button type="warning" size="mini" @click="edit(scope.row)">编辑</el-button>
        <el-button type="danger" size="mini" @click="save(scope.row)">保存</el-button>

        <el-button type="primary" size="mini" @click="del(scope.row)">删除</el-button>
      </template>
  </el-table-column>
    </el-table>
<div class="block">
<!-- 分页 -->
<el-pagination
  
  style="background-color:aliceblue;"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="query.pagenum"
  :page-sizes="[5, 8, 9]"
  :page-size='query.pagesize'
  layout="total, sizes, prev, pager, next, jumper"
  :total="query.total">
</el-pagination>
</div>

</div>

<!-- 增加数据 -->
<el-dialog title="新增用户" v-model="dialogTableVisible">
  <div class="con">
    <div class="users">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="用户名" prop="user">
    <el-input type="text" v-model="ruleForm.user" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="电话" prop="phone">
    <el-input type="number" v-model="ruleForm.phone" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="邮箱" prop="mail">
    <el-input v-model="ruleForm.mail"></el-input>
  </el-form-item>
  <el-form-item label="地址" prop="address">
    <el-input v-model="ruleForm.address"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</div>
</el-dialog>
</template>

<script>

  export default {
    data() {
      var checkMail = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
        callback()
      };
      var checkuser = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('用户名不能为空'));
        } else {
          callback();
        }
      };
      var checkPhone = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('电话不能为空'));
        }else {
          const reg = /^1[3456789]\d{9}$/
          if(reg.test(value)){
            callback();

          }else{
            return callback(new Error('请输入正确的手机号'))
          }
        }
      };
      var checkAddress =(rule, value, callback)=>{
        if (value === '') {
          callback(new Error('地址不能为空'));
        }else {
          callback();
        }       
      }
      return {
        tableData: [],
        dialogTableVisible:false,
        ruleForm: {
          user: '',
          phone: '',
          mail: '',
          address:'',
        },
        query:{
          pagenum:1, //当前页码
          pagesize:5, //每页显示条数
          total:0
        },

        tickList:[],   //当前页数据

        rules: {
          user: [
            { validator: checkuser, trigger: 'blur' }
          ],
          phone: [
            { validator: checkPhone, trigger: 'blur' },
          ],
          mail: [
            { validator: checkMail, trigger: 'blur' },
            {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
          ],
          address:[
            { validator: checkAddress, trigger:'blur'}
          ]
        }
      }
    },
    methods: {
      //检查token
      checktoken(){
        let token = localStorage.getItem('token')
        this.$axios({
          method:'post',
          url:'token',
          data:token,
          headers:{'Authorization': localStorage.getItem('token')}
        }).then(res=>{
          let {code,msg} = res.data
          if(code==401){
            this.$router.push({name:'login'})
            this.$message.error(msg)
          }

        })
      },
      //当前页数据
      getPageInfo(){
        //清空tickList中的数据
        this.tickList=[];
        // 获取当前页的数据
        for(let i=(this.query.pagenum-1)*this.query.pagesize;i<this.query.total;i++){
          //把遍历的数据添加到tickList里面
          if(this.tableData){
            let data = this.tableData[i]
            this.tickList.push(data);
          }
          //判断是否达到一页的要求
          if(this.tickList.length===this.query.pagesize)break;
        }},
      //当页码或页面大小改变时触发回调
      handleSizeChange(newSize) {
        this.query.pagesize = newSize
        this.getPageInfo()

      },
      handleCurrentChange(newPage) {
        this.query.pagenum=newPage
        this.getPageInfo()

      },
        //编辑用户数据
        edit(row){
          row.edit = true

        },
        //保存
        async save(row){

          let {data} = this.$axios.post('updata',row)
          console.log(data);
          row.edit = false
        },

      //获取列表
        async getusers(){
            let {data} = await this.$axios.get('getusers')
            if(data.code == 200){
                this.tableData = data.msg
                this.query.total = data.msg.length
                this.getPageInfo()  //获取当前页数据
            }

        },
        //删除
        async del({id}){
          let {data} = await this.$axios.post('deleteuser',{id})
          console.log(data);
          if(data.code==200){
            this.getusers()
          }
        },
//新增数据
        submitForm(formName) {  
        this.$refs[formName].validate(async (valid) => { 
          if (valid) {
            let {data} = await this.$axios.post('addusers',this.ruleForm)
            if(data.code==200){
              this.getusers()
              this.dialogTableVisible =false

            }
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },

    },
    mounted(){
        this.getusers()
        this.checktoken()
    }
  };
</script>
<style scoped>
.container{
    margin: 0 0;
    padding: 0 0;
}
.toolbar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>